<template>
	<view class="content">
		<view class="status_bar">
			<text>内容区域距离顶部的距离，APP和小程序中为0</text>
		</view>
		<!-- 引入自定义组件 -->
		<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ -->
		<slide-view width="750" height="110" slide-width="500"></slide-view>
		<!-- #endif -->
		<image class="logo" src="/static/logo.png"></image>
		<view>
			<!-- #ifdef SHENG -->
			<text class="desc">测试环境描述文字</text>
			<!-- #endif -->
			<navigator url="/pages/list/list">列表页</navigator>
		</view>
		<view class="uni-list-cell-db">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<input class="uni-input" :value="date" placeholder="请选择日期" />
			</picker>
		</view>
		<view class="swiper-wrap">
			<uni-swipe-action>
				<uni-swipe-action-item :options="options" @change="change">
					<view class='cont'>向左滑动试试</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="swiper-wrap">
			<!-- #ifdef APP-PLUS -->
			<button type="primary" @click="showDrawer">左侧菜单</button>
			<button type="primary" :style="{marginTop: '10px'}" @click="takePicture">拍照</button>
			<button type="primary" :style="{marginTop: '10px'}" @click="handleScan">扫码</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	// 该滑动组件在app和微信小程序上会使用wxs(视图层js技术)解决视图层和逻辑层的通讯折损问题,提高界面流畅度
	// 在不支持wxs的其他小程序端会使用js模拟filter/sjs等类似效果
	import { uniSwipeAction, uniSwipeActionItem } from '@dcloudio/uni-ui';

	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				date: currentDate,
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		onLoad() {
			// #ifdef H5 || SHENG
			alert('特殊环境下的alert方法');
			// #endif
			// 监听 nvue子窗体 消息
			uni.$on('drawer-page', this.drawerCB);
		},
		onReady() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行在Android上');
					break;
				case 'ios':
					console.log('运行在iOS上');
					break;
				default:
					console.log('运行在开发者工具上');
					break;
			}
		},
		mounted() {
			// 操作dom，除了获取节点信息，还可做滚动操作(nvue暂不支持，可用dom模块代替)
			const query = uni.createSelectorQuery()
			let view = query.select('.status_bar')
			view.fields({
			  size: true,
			  scrollOffset: true
			}, data => {
			  console.log("得到节点信息" + JSON.stringify(data));
			}).exec()
		},
		onUnload() {
			// 页面卸载前，移除事件监听器
			uni.$off('drawer-page', this.drawerCB);
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			showDrawer() {
				// 显示nvue原生组件子窗体
				uni.getSubNVueById('drawer').show('slide-in-left', 200);
			},
			// 监听抽屉菜单回调函数
			drawerCB(data) {
				uni.showToast({
					title: '点击了第' + data + '项',
					icon:"none"
				});
			},
			// 拍照功能(使用 5+ api)
			takePicture() {
				const cmr = plus.camera.getCamera();
				const res = cmr.supportedImageResolutions[0];
				const fmt = cmr.supportedImageFormats[0];
				cmr.captureImage( function( path ){
						console.log( "照片存储在: " + path );  
					},
					function( error ) {
						console.log( "拍照操作失败: " + error.message );
					},
					{resolution:res,format:fmt}
				);
			},
			// 扫码功能
			handleScan() {
				uni.scanCode({
				    onlyFromCamera: true,
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});
			},
			bindDateChange(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			change(open) {
				console.log('当前开启状态：' + open)
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--window-top);
		width: 100%;
		line-height: var(--window-top);
		background-color: #DD524D;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.desc {
		display: block;
		text-align: center;
		color: dimgrey;
	}

	.uni-input {
		text-align: center;
	}
	
	.swiper-wrap {
		width: 300rpx;
		padding-top: 20rpx;
		button {
			margin-top: 20rpx;
		}
	}
	
	/deep/ .uni-swipe_box {
		background-color: #F0FFFF !important;
	}
</style>
